<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
        font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
      }
    </style>
	<title>武侯祠</title>
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	<script type="text/javascript" src="js/json_parse.js"></script>
</head>
<body>
	<div id="container" tabindex="0"></div>
	<div id="panel"></div>
	<div class="button-group">
		<input type="button" class="button" value="删除多个点标记" id="clearMarker"/>
	</div>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e843bab8ae313a72cea9ed68ef713efd"></script> 
	<script type="text/javascript">
	var map = new AMap.Map('container',{
		resizeEnable:true,
		zoom:18,
		center:[104.048022,30.646217]
	});
	var marker = null;
	
	/*古槐 碧草园 过厅 英武廊*/
	
	AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
	        map.remove(markers);
	    }, false);

	var jsonPoints = '{"jPoints":['+
		'{"lng":104.04881, "lat":30.645973},'+
		'{"lng":104.049025, "lat":30.645756}, '+
		'{"lng":104.049347, "lat":30.645802},'+
		'{"lng":104.049282, "lat":30.64546} ]}';		
	var points = JSON.parse(jsonPoints);
	var markers = [];

	makeMap();


	map.on('click',function(e){
		var lng = e.lnglat.getLng();
		var lat = e.lnglat.getLat(); 
		for(var i = 0;i<points.jPoints.length;i++){
			if( (Math.abs(lng - points.jPoints[i].lng ) < 0.00008) & (Math.abs(lat-points.jPoints[i].lat ) < 0.00008) ){
				console.log(i);
				addMarker(lng,lat);
				alert(i);
				break;
			}
			else{				
				if(marker){
					marker.setMap(null);
					marker = null;
				}
			}				
		} 
	}	
	);
	
	function addMarker(addLng,addLat) {
		if(marker) { return; }
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [addLng, addLat]
           /* draggable:true,        //备用
            cursor:'move',
            raiseOnDrag:true */
        });
        marker.setMap(map);
    }

    function makeMap(){
    	for(var i = 0;i<points.jPoints.length;i++){
    		var mapMarker = new AMap.Marker({
            	icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            	position: [points.jPoints[i].lng, points.jPoints[i].lat]
        	});
        	mapMarker.setMap(map); 
        	markers.push(mapMarker);
        }
    }


	</script>
</body>
</html>